<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form">
    <input name="id" id="id" type="hidden"/>
    <input name="photoUrl" id="photoUrl" type="hidden"/>
    <br/>
    <div class="layui-form-item" style="margin-left: 20%">
        <label class="layui-form-label">名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="title" id="title" autocomplete="off" required
                   class="layui-input">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 20%;" id="imgDiv">
        <label class="layui-form-label">图标:</label>
        <div class="layui-input-inline">
            <div class="image-uploader" style="width: 100px;height: 100px">
                <div class="image-preview" style="width: 100px;height: 100px">
                    <div class="image">
                        <img src="" id="img" style="width: 100px;height: 100px">
                        <span class="image-browse" style="width: 100px" id="uploadFun"><strong>上传图片</strong><span
                                style="width: 100px"
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="width: 300px"><span  style="color: red">图片类型:JPG/JPEG/PNG 推荐尺寸:100X100</span></div>
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 20%">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="text" name="seq" id="seq" autocomplete="off" required
                   class="layui-input">
        </div>
    </div>
    <button class="layui-btn" id="formSubmit" lay-submit="" lay-filter="formSubmit" style="display: none">立即提交</button>
</form>
<script th:replace="/common/inc::incJs"></script>
<style type="text/css">
    .table td {
        text-align: left;
    }

    .fancybox {
        margin: 5px;
        width: 120px;
        height: 160px;
        position: relative;
    }

    .upload_progress {
        margin: 0px;
        padding: 5px 0px;
        width: 100%;
        color: #fff;
        background-color: rgba(0, 0, 0, .6);
        position: absolute;
        bottom: 0px;
        font-size: 14px;
        text-align: center;
        z-index: 2;
    }

    .imgDiv {
        display: inline-block;
        position: relative;
    }
</style>
<script>
    var form = layui.form;
    var successCallback;
    var id = getQueryString("id");
    $("#id").val(id);

    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4', // 上传模式,依次退化
        browse_button: 'uploadFun', // 上传选择的点选按钮，**必需**
        uptoken_url: '/backend/security/qiniu/getUptoken', // Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        domain: 'http://image.intelsalon.com/', //  域名，下载资源时用到，**必需**
        get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的token
        container: imgDiv, // 上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '600kb', // 最大文件体积限制
        flash_swf_url: '/js/plupload/Moxie.swf', // 引入flash,相对路径
        dragdrop: true, // 开启可拖曳上传
        drop_element: 'img', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '5mb', // 分块上传时，每片的体积
        auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {

            },
            'BeforeUpload': function (up, file) {

            },
            'UploadProgress': function (up, file) {

            },
            'FileUploaded': function (up, file, info) {
                var domain = up.getOption('domain');
                var res = $.parseJSON(info);
                var sourceLink = domain + res.key;// 获取上传成功后的文件的Url*/
                $("#img").attr("src", sourceLink);
                $("#photoUrl").val(sourceLink);
                layer.msg("上传成功");
            },
            'Error': function (up, err, errTip) {
                layer.msg(errTip);
            },
            'UploadComplete': function () {

            }
        }
    });

    //监听提交
    form.on('submit(formSubmit)', function (data) {
        if ($("#photoUrl").val()) {
            if (id != "") {
                $.post('/backend/security/homeContent/update', data.field, function (res) {
                    if (res.code < 0) {
                        layer.msg(res.message);
                    }
                    else {
                        layer.msg('操作成功');
                        parent.layui.table.reload("grid");
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                });
            }
            else {
                $.post('/backend/security/homeContent/add', data.field, function (res) {
                    if (res.code < 0) {
                        layer.msg(res.message);
                    }
                    else {
                        layer.msg('操作成功');
                        parent.layui.table.reload("grid");
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                });
            }
        } else {
            layer.msg('图片不能为空');
        }
        return false;
    });

    var formSubmit = function (callback) {
        successCallback = callback;
        $("#formSubmit").click();
    }


    $(function () {
        if (id != "") {
            $.post('/backend/security/homeContent/getById', {id: id}, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    $("form").loadData(res.body);
                    $("#img").attr("src", res.body.photoUrl);
                }
            });
        }
    })
</script>
</body>
</html>
